<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		.box{
			width: 100px;
			height:100px;
			background-color: blue;
			transform:translate(100px,100px);
		}
	</style>
	<body>
		<div id='app' >
			弹起来：<input @keyup='getKey'/><br>
			按下去：<input @keydown.enter='login'/>
			<h1 align=center>{{letter}}</h1>
			上下左右移动div
			<div class="box"></div>
		</div>
		<script>
			//创建 销毁
			Vue.createApp({
				data(){
					return{
					letter:'A'
					}
				},
				created(){//创建完成 没有元素 生命周期函数  不需要触发
				
				},
				mounted(){//挂载完成
					document.addEventListener('keydown',this.pressKey);
				},
				methods:{
					pressKey(event){
						console.log(event)
						this.letter=event.key
					},
					login(){
						alert('登陆')
					},
					getKey(event){//自带参数:事件对象
						console.log(event)
						if(event.keyCode == 13){//回车 登陆
							alert('登陆')
						}
						if(event.keyCode == 32){
							alert('敲了空格')
						}
					}
				},
			}).mount('#app')
		</script>
	</body>
</html>